import React from 'react';
import { Form, Row, Col, DatePicker, Icon, Select, Input, Button } from 'antd';

import { history } from 'umi'
import LimitInput from '@/components/LimitInput';
import { UploadOssCompact } from '@/containers';
import { renderOptionValue, momentToString, renderHiddenField, renderTextArea, OFFICE_FILE_TYPES } from '@/utils/utils';
import { newTabProps } from '@/utils/tab';
import { TYPE_LIST, TYPE_LIST_ENUM } from '../../constants';
import Extra from './Extra';

const dateHelp = (
    <div style={{ color: '#FF4F60' }}>
        <Icon type="info-circle" theme="filled" style={{ marginRight: 9 }} />
        最终离职日期以审批结果为准。
    </div>
);

const Info = props => {
    const { isEdit, form, formValueMap = {}, isProxy = false } = props;
    const { getFieldDecorator, getFieldValue } = form;

    // 又来了又来了
    const dimissionType = form.getFieldValue('dimissionType') ?? formValueMap.dimissionType;
    const showInfoExtra = isProxy && dimissionType === TYPE_LIST_ENUM.PASSIVE;

    const existFileList = formValueMap.filesDisplay;

    // 如果提交数据不需要格式化，那么只需要初始化filesDisplay
    // 因为每次提交前得格式化，都需要重复files -> submit files的过程
    React.useEffect(() => {
        if (existFileList) {
            form.setFieldsValue({
                filesDisplay: existFileList
            });
        }
    }, [JSON.stringify(existFileList)]);

    return (
        <Row>
            <Row>
                <Col span={24}>
                    <Form.Item label="离职类型">
                        {isProxy &&
                            (isEdit ? (
                                getFieldDecorator('dimissionType', {
                                    rules: [{ required: true, message: '离职类型不能为空' }],
                                    initialValue: formValueMap.dimissionType ?? TYPE_LIST[1].value
                                })(
                                    <Select placeholder="请选择离职类型" allowClear={false}>
                                        {TYPE_LIST.map(item => (
                                            <Select.Option value={item.value} key={item.value}>
                                                {item.text}
                                            </Select.Option>
                                        ))}
                                    </Select>
                                )
                            ) : (
                                <>
                                    {renderOptionValue(TYPE_LIST, formValueMap.dimissionType)}
                                    {renderHiddenField({
                                        field: 'dimissionType',
                                        initialValue: formValueMap.dimissionType,
                                        form
                                    })}
                                </>
                            ))}
                        {!isProxy && (
                            <div>
                                主动离职
                                <div style={{ display: 'none' }}>
                                    {getFieldDecorator('dimissionType', { initialValue: TYPE_LIST[0].value })(
                                        <Input />
                                    )}
                                </div>
                            </div>
                        )}
                    </Form.Item>
                </Col>
            </Row>
            <Row>
                <Col span={24}>
                    <Form.Item label="期望离职日期" extra={isEdit && !!getFieldValue('applyDimissionDate') && dateHelp}>
                        {isEdit ? (
                            getFieldDecorator('applyDimissionDate', {
                                rules: isEdit ? [{ required: true, message: '离职日期不能为空' }] : []
                            })(
                                <DatePicker
                                    style={{ width: '80%' }}
                                    getCalendarContainer={trigger => trigger.parentNode}
                                />
                            )
                        ) : (
                            <>
                                {momentToString(formValueMap.applyDimissionDate, 'YYYY-MM-DD')}
                                {renderHiddenField({
                                    field: 'applyDimissionDate',
                                    initialValue: formValueMap.applyDimissionDate,
                                    form
                                })}
                            </>
                        )}
                        {isEdit && (
                            <Button
                                type="link"
                                onClick={() => {
                                    history.push({
                                        pathname: '/office/institutions/rulesManage/personnel',
                                        ...newTabProps
                                    });
                                }}
                            >
                                离职制度
                            </Button>
                        )}
                    </Form.Item>
                </Col>
            </Row>
            <Row>
                <Col span={24}>
                    <Form.Item label="离职原因">
                        {isEdit ? (
                            getFieldDecorator('dimissionReason', {
                                rules: isEdit
                                    ? [
                                          { required: true, message: '请输入离职原因' },
                                          {
                                              min: 1,
                                              max: 4000,
                                              message: '请输入1~4000个字符'
                                          }
                                      ]
                                    : []
                            })(<LimitInput area rows={4} placeholder="请输入" maxLength={4000} />)
                        ) : (
                            <>
                                {renderTextArea(formValueMap.dimissionReason)}
                                {renderHiddenField({
                                    field: 'dimissionReason',
                                    initialValue: formValueMap.dimissionReason,
                                    form
                                })}
                            </>
                        )}
                    </Form.Item>
                </Col>
            </Row>
            <Row>
                <Col span={24}>
                    <Form.Item
                        label="说明文件"
                        extra={isEdit && '支持图片、办公文件等多种格式，单个文件大小100M以内，最多上传10个'}
                    >
                        {getFieldDecorator('filesDisplay')(
                            <UploadOssCompact
                                rules={[{ max: 100 }, { length: 10 }, { type: OFFICE_FILE_TYPES }]}
                                editable={isEdit}
                                onResourceChange={resource => {
                                    form.setFieldsValue({
                                        files: resource ? [resource] : null
                                    });
                                }}
                                ossType="private"
                                categoryCode="DimissionExplainFile"
                            />
                        )}
                    </Form.Item>
                    <Form.Item style={{ display: 'none' }}>{getFieldDecorator('files')(<Input />)}</Form.Item>
                </Col>
            </Row>
            {showInfoExtra && <Extra {...props} />}
        </Row>
    );
};

export default Info;
